<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="e1">
    <img src="bla.png" class="a1">
    <div  class="y1">My Cart</div>
    <img src="横线.png" class="y2">

    <img src="h3.png" class="y3">
    <div class="y4">Bell Pepper Red</div>
    <div class="y5">1kg, Price</div>
    <img src="cha.png" class="y6">
    <img src="jie.png" class="y7">
    <img src="kuang.png" class="y8">



    <button onclick="increaseCount()" class="m1">
        <img src="h4.png" class="y9">
    </button>




    <div class="h2">
        <span id="countDisplay">0</span></div>




    <div class="h3">$4.99</div>
    <img src="h5.png" class="h4">




    <img src="jidanll.png" class="t1">
    <div class="t2">Egg Chicken Red</div>
    <div class="t3">4pcs, Price</div>
    <img src="cha.png" class="t4">
    <img src="jie.png" class="t5">
    <img src="kuang.png" class="t6">
    <img src="h4.png" class="t7">
    <img src="baik.png" class="t8">
    <div class="t9">1</div>
    <div class="t10">$1.99</div>
    <img src="h5.png" class="t11">


    <img src="h2.png" class="p1">
    <div class="p2">Organic Bananas</div>
    <div class="p3">12kg, Price</div>
    <img src="cha.png" class="p4">
    <img src="jie.png" class="p5">
    <img src="kuang.png" class="p6">
    <img src="h4.png" class="p7">
    <img src="baik.png" class="p8">
    <div class="p9">1</div>
    <div class="p10">$3.00</div>
    <img src="h5.png" class="p11">

    <img src="h1.png" class="l1">
    <div class="l2">Ginger</div>
    <div class="l3">250gm, Price</div>
    <img src="cha.png" class="l4">
    <img src="jie.png" class="l5">
    <img src="kuang.png" class="l6">
    <img src="h4.png" class="l7">
    <img src="baik.png" class="l8">
    <div class="l9">1</div>
    <div class="l10">$2.99</div>
    <img src="h5.png" class="l11">

    <img src="hhh.png" class="f1">
    <div class="f2">Go to Checkout </div>




    <p class="pos_fixed">
        <img src="购物车页面.png" style="left: 20px;
top:10px;position:relative;">
        <a href="http://localhost:63342/untitled5/%E5%88%86%E7%B1%BB.html?_ijt=jp5tqce2i9t96a733qtjle4hk9&_ij_reload=RELOAD_ON_SAVE">
            <img src="搜索标签.png" style="left: 60px;
top:10px;position:relative;">
        </a>
        <img src="购物车页面.png" style="left: 100px;
top:13px;position:relative;">

        <img src="收藏页面.png" style="left: 140px;
top:14px;position:relative;">

        <img src="个人主页.png" style="left: 180px;
top:14px;position:relative;">



    </p>
    <span id="totalPriceDisplay" class="f3">0</span>
    <div class="container">
        <img src="gwjs.png" alt="背景图片"
             class="background-image">
<a href="http://localhost:63342/untitled5/%E7%BB%93%E7%AE%97%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html?_ijt=ntgld252hk2au9d2uvgf3qagrq&_ij_reload=RELOAD_ON_SAVE">
        <img src="hhh.png" alt="前景图片"
             class="foreground-image">
</a>
<a href="http://localhost:63342/untitled5/buzhi.html?_ijt=ubkhhkq85ga5gs09t5il316jqk&_ij_reload=RELOAD_ON_SAVE">
        <div class="text">Place Order！</div>
    <a>

    </div>





</body>
<script>
    let count = 0;
    let pricePerItem = 4.99;

    function increaseCount() {
        count++;
        document.getElementById("countDisplay").innerHTML = count;
        calculatePrice();
    }

    function calculatePrice() {
        let totalPrice = count * pricePerItem;
        document.getElementById("totalPriceDisplay").innerHTML = totalPrice;
    }
</script>

<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .background-image {
        left: 0.52px;
        top: 365px;
        width: 414px;
        height: 791px;
        opacity: 1;
        border-radius: 30px 30px  0px 0px;
        background: rgba(242, 243, 242, 1);
        position: absolute;
    }

    .foreground-image {
        left: 30px;
        top: 800px;
        width: 353px;
        height: 67px;
        opacity: 1;
        border-radius: 19px;
        background: rgba(83, 177, 117, 1);
        position: absolute;
    }

    .text {
        position: absolute;
        top: 820px;
        left: 50%;

        font-size: 18px;

        color: white;
        text-shadow: 2px 2px 4px black;
        width: 200px;
        height: 200px;
        position: absolute;
    }

    .m1{
        left: 215px;
        top: 185px;
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 20px 20px 20px 20px;
        border: 1px solid rgba(226, 226, 226, 1);
        background-color: #fdfdfe;
    }
    .f3{
        left: 321.66px;
        top: 734.88px;
        width: 43px;
        height: 22px;
        opacity: 1;
        border-radius: 4px;
        background: rgba(72, 158, 103, 1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 2px 5px 2px 5px;
        position: absolute;
    }
    .f2{
        left: 139.83px;
        top: 738.88px;
        width: 134.13px;
        height: 14px;
        opacity: 1;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(252, 252, 252, 1);
        text-align: left;
        vertical-align: top;
        position: absolute;
    }
    .f1{
        left: 24.89px;
        top: 712.38px;
        width: 364px;
        height: 67px;
        opacity: 1;
        border-radius: 19px;
        background: rgba(83, 177, 117, 1);
        position: absolute;
    }
    p.pos_fixed
    {
        position:fixed;
        top:600px;
        left: 7px;
        width: 408px;
        height: 80px;
        background-color: white;
        border: 1px solid antiquewhite;
    }
    .p1{
        left: 30px;
        top: 470.98px;
        width: 68.62px;
        height: 54.56px;
        opacity: 1;
        background: url(https://img.js.design/assets/img/622ad42d0b96c7752c67f5ce.png#dacaab9321cabdfea1373cbe97f9262f);
        position: absolute;
    }
    .p2{
        left: 128.41px;
        top: 449.98px;
        width: 137.02px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .p3{
        left: 128.41px;
        top: 472.98px;
        width: 72.27px;
        height: 14.89px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(124, 124, 124, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .p4{
        left: 382.81px;
        top: 463.98px;
        width: 8.4px;
        height: 10px;

        position: absolute;
    }
    .p5{
        left: 142.74px;
        top: 522.7px;
        width: 17px;
        height: 2.84px;
        opacity: 1;
        background: rgba(179, 179, 179, 1);
        position: absolute;
    }
    .p6{
        left: 128.41px;
        top: 501.29px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(240, 240, 240, 1);

        position: absolute;
    }
    .p7{
        left: 230.31px;
        top: 514.2px;
        width: 17px;
        height: 17px;
        opacity: 1;
        background: rgb(253, 253, 254);
        position: absolute;
    }
    .p8{
        left: 215.97px;
        top: 499.87px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .p9{
        left: 191.53px;
        top: 519.2px;
        width: 10px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .p10{
        left: 339.62px;
        top: 500.91px;
        width: 49.38px;
        height: 27px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 27px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .p11{
        left: 25.2px;
        top: 576.45px;
        width: 363.6px;
        height: 0px;
        opacity: 1;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }


    .l1{
        left: 23.85px;
        top: 620.74px;
        width: 72.39px;
        height: 65.04px;
        opacity: 1;
        background: url(https://img.js.design/assets/img/622ad452f89eeaf9720538cc.png#7c8d3401c34ca7697ebda3c8fc9f4211);
        position: absolute;
    }
    .l2{
        left: 128.41px;
        top: 606.95px;
        width: 137.02px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .l3{
        left: 128.41px;
        top: 629.95px;
        width: 83px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(124, 124, 124, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .l4{
        left: 382.81px;
        top: 620.95px;
        width: 8.4px;
        height: 10px;

        position: absolute;
    }
    .l5{
        position: absolute;
        left: 142.74px;
        top: 679.68px;
        width: 17px;
        height: 2.84px;
        opacity: 1;
        background: rgba(179, 179, 179, 1);

    }
    .l6{
        left: 128.41px;
        top: 658.26px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(240, 240, 240, 1);


        position: absolute;
    }
    .l7{
        left: 230.31px;
        top: 671.18px;
        width: 17px;
        height: 17px;
        opacity: 1;
        background: rgb(253, 253, 254);



        position: absolute;
    }
    .l8{
        left: 215.97px;
        top: 656.85px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(226, 226, 226, 1);


        position: absolute;
    }
    .l9{
        left: 191.53px;
        top: 676.18px;
        width: 10px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;

        position: absolute;
    }
    .l10{
        left: 345px;
        top: 658.39px;
        width: 44px;
        height: 54px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 27px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;

        position: absolute;
    }
    .l11{
        left: 0px;
        top: 732.02px;
        width: 413.6px;
        height: 0px;
        opacity: 1;

        border: 1px solid rgba(226, 226, 226, 1);


        position: absolute;
    }


    .t1{
        left: 13.83px;
        top: 297.63px;
        width: 86.74px;
        height: 86.74px;
        opacity: 1;
        background: url(https://img.js.design/assets/img/622ad484cde90a439156c28c.png#8dd00e217746f6798897e2226ccc814c);
        position: absolute;
    }
    .t2{
        left: 128.41px;
        top: 293px;
        width: 137.02px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;

    }
    .t3{
        left: 128.41px;
        top: 316px;
        width: 72.27px;
        height: 14.89px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(124, 124, 124, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .t4{
        left: 382.81px;
        top: 307px;
        width: 8.4px;
        height: 10px;
        position: absolute;
    }
    .t5{
        left: 142.74px;
        top: 365.73px;
        width: 17px;
        height: 2.84px;
        opacity: 1;
        background: rgba(179, 179, 179, 1);
        position: absolute;
    }
    .t6{
        left: 128.41px;
        top: 344.31px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(240, 240, 240, 1);

        position: absolute;
    }
    .t7{
        left: 230.31px;
        top: 357.23px;
        width: 17px;
        height: 17px;
        opacity: 1;
        background: rgb(253, 253, 254);
        position: absolute;
    }
    .t8{
        left: 215.97px;
        top: 342.89px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .t9{
        left: 191.53px;
        top: 362.23px;
        width: 10px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .t10{
        left: 345px;
        top: 344.43px;
        width: 44px;
        height: 54px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 27px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .t11{
        left: 25.2px;
        top: 419.48px;
        width: 363.6px;
        height: 0px;
        opacity: 1;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .h4{
        left: 25.2px;
        top: 262.5px;
        width: 363.6px;
        height: 0px;
        opacity: 1;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .h3{
        left: 345px;
        top: 187.43px;
        width: 44px;
        height: 54px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 27px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .h2{
        left: 191.53px;
        top: 205.22px;
        width: 10px;
        height: 18px;
        opacity: 1;



        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;

        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .h1{
        left: 215.97px;
        top: 185.89px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .y9{
        left: 13px;
        top: 15px;
        width: 17px;
        height: 17px;
        opacity: 1;
        background: rgb(253, 253, 254);
        position: absolute;
    }
    .y8{
        left: 128.41px;
        top: 187.3px;
        width: 45.67px;
        height: 45.67px;
        opacity: 1;
        border-radius: 17px;

        border: 1px solid rgba(240, 240, 240, 1);

        position: absolute;
    }
    .y7{
        left: 142.74px;
        top: 208.72px;
        width: 17px;
        height: 2.84px;
        opacity: 1;
        background: rgba(179, 179, 179, 1);
        position: absolute;
    }
    .y6{
        left: 382.81px;
        top: 150px;
        width: 8.4px;
        height: 10px;
        transform: rotate(-180deg);
        position: absolute;
    }
    .y5{
        left: 128.41px;
        top: 158.99px;
        width: 72.27px;
        height: 14.89px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(124, 124, 124, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .y4{
        left: 128.41px;
        top: 135.99px;
        width: 137.02px;
        height: 18px;
        opacity: 1;

        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;
    }
    .y3{
        left: 25px;
        top: 152.14px;
        width: 70.43px;
        height: 64.69px;
        background: url(https://img.js.design/assets/img/622ad45165f618b5716cee46.png#df80f484040ddb66a81f73b4e26fea84);
        position: absolute;
    }
    .y2{
        left: 5px;
        top: 105.49px;
        width: 410px;
        height: 0px;
        opacity: 1;

        border: 1px solid rgba(226, 226, 226, 1);

        position: absolute;
    }
    .y1{
        left: 170px;
        top: 55.82px;
        width: 74px;
        height: 18px;
        opacity: 1;
        /** 文本1 */
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: center;
        vertical-align: middle;
        position: absolute;
    }
    .e1{
        left: -1366px;
        top: -813px;
        width: 405px;
        height: 870px;
        opacity: 1;
        background: rgb(63, 63, 64);
        border: 1px solid antiquewhite;

    }
    .a1{
        left: -0.4px;
        top: 4.83px;
        width: 414px;
        height: 80px;
        opacity: 1;
    }
</style>
</html>